﻿@model SearchViewModel
@{
    ViewBag.Title = "Kelper - Search";
}

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/sammy-0.7.1-min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/search.js")"></script>

<h2>
    Search our tasteful database by ingredients
    @Html.ActionLink("I want to do a regular search", "regular")
</h2>

<div id="ingredient-boxes">
    <fieldset>
        <legend>Popular ingredients</legend>
        <table>
            @foreach (var row in Model.PopularIngredients.Table(itemsPerRow: 5))
            {
                <tr>
                    @foreach (var i in row)
                    {
                        <td>
                            <input @(Model.SearchedIngredients.Contains(i.Name) ? "checked='checked'" : "")
                                   type="checkbox" id="checkbox-for-@i.Name" value="@i.Name" />
                            <label for="checkbox-for-@i.Name">@i.Name</label>
                        </td>
                    }
                </tr>
            }
        </table>
    </fieldset>
</div>

@using (Html.BeginForm(null, null, FormMethod.Get))
{
    <div>
        <label class="subtle" for="ingredients">Enter ingredients separated by commas</label>
        <a href="@Url.Content("~/about-ingredients.html")" target="_blank" class="subtle remote-url">
            How should ingredients be selected?
        </a><br />
        @Html.TextBox("ingredients", null,
                      new { data_val = "true", data_val_required = "*", placeholder = "Enter ingredients", style = "width:50%" })
        <input id="search-submit" type="submit" value="Search!" />
    </div>
}

@Html.Action("OnlyRecipes")